<template>
  <div
    class="bill-detail route-page"
    :class="$store.getters.isMobile ? 'back-class' : ''"
  >
    <section class="header">
      <a-page-header
        title="收入列表详情"
        @back="goBack"
      >
      </a-page-header>
    </section>
    <section class="content">
      <a-card title="合同信息">
        <a-descriptions layout="vertical" :column="4">
          <a-descriptions-item label="租客">
            <span :class="detail.owner_id ? 'link' : ''" @click.stop="goOwnerDetail">{{detail.owner_name}}</span>
          </a-descriptions-item>
          <a-descriptions-item label="楼宇名称">{{detail.build_name}}</a-descriptions-item>
          <a-descriptions-item label="房号">{{detail.room_number_txt}}</a-descriptions-item>
          <a-descriptions-item label="合同编号">
            <div style="word-break: break-all">
              <template v-for="(item, index) in detail.contract_info" :key="index">
                <span :class="item.contract_id ? 'link' : ''" @click.stop="goContractDetail(item.contract_id)">
                  {{item.contract_number}}
                  <span v-if="index <= detail.contract_info?.length - 2">、</span>
                </span>
              </template>
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card v-for="(item, index) in dataSource" :key="index" :title="`${item.cost_type_txt}#应收(不含税)`" class="mt-10">
        <a-table
          :dataSource="item?.list || []"
          :columns="columns"
          :pagination="false"
          rowKey="id"
        >
          <template #bodyCell="{ text, record, index, column }"></template>
          <template #footer>
            <a-row justify="end" align="middle">
              <a-col>
                {{item.cost_type_txt}}合计：￥{{item.total}}
              </a-col>
            </a-row>
          </template>
        </a-table>
      </a-card>
    </section>


    <!-- 租客详情 -->
    <OwnerDetailDrawer
      :visible="ownerDetailVisible"
      :id="detail.owner_id"
      @cancel="handleCancelDetail"
    />

    <!--  合同详情  -->
    <ContractDetailDrawer
      :visible="contractDetailVisible"
      :id="contractDetailId"
      @handleCancel="handleCancelDetail"
    />
  </div>
</template>

<script>
import {
  computed,
  createVNode,
  defineAsyncComponent,
  defineComponent,
  onActivated,
  reactive,
  toRefs,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import request from '@/common/utils/request'
import { CopyOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { TextTip } from "bl-common-vue3";
import store from "../../../store";
import { message, Modal, notification } from "ant-design-vue";
import BLCOMMON from "bl-common-vue3";
import OwnerDetailDrawer from "@/views/village/OwnerManage/modules/OwnerDetailDrawer.vue";
const ContractDetailDrawer = defineAsyncComponent(() =>
  import("@/views/contract/ContractDetail/ContractDetailDrawer.vue")
);
export default defineComponent({
  name: "incomeDetail",
  components: {
    OwnerDetailDrawer,
    TextTip,
    CopyOutlined,
    ContractDetailDrawer,
  },
  setup() {
    const $route = useRoute();
    const $router = useRouter();

    const state = reactive({
      detail: {},
      contractId: Number($route.query.contract_id),
      ownerId: Number($route.query.owner_id),
      columns: [],
      dataSource: [],
      ownerDetailVisible: false,
      contractDetailVisible: false,
      contractDetailId: 0,
    });


    const goBack = () => {
      if (window.history.state.back) {
        $router.back();
      } else {
        $router.replace({
          name: "incomeList",
        });
      }
    };

    const getColumns = () => {
      let _columns = [
        {
          title: "年份",
          dataIndex: "year_name",
          key: "year_name",
          width: 80,
        },
      ];
      for (let i = 1; i <= 12; i++) {
        _columns.push({
          title: `${i}月`,
          dataIndex: `month_${i}`,
          key: `month_${i}`,
          renderKey: 'monthRender',
          customRender: ({ text, record, index }) => {
            return record.hasOwnProperty(`month_${i}`) ? text : '--';
          },
        });
      }
      state.columns = _columns;
    };

    const getDetail = () => {
      let params = {};
      if (state.contractId) {
        params.contract_id = state.contractId
      }
      if (state.ownerId) {
        params.owner_id = state.ownerId
      }
      request
        .get("/org", "/incomeConfirm/getIncomeConfirmDetail", params)
        .then((res) => {
          let data = [];
          (res?.returnData || []).forEach((v) => {
            const years = Object.keys(v.data);
            let list = [];
            years.forEach((year) => {
              let obj = {
                year_name: year,
              }
              v.data[year].map((item) => {
                const arr = item?.y_m?.split("-");
                if (arr?.length > 1) {
                  obj[`month_${Number(arr[1])}`] = item.receivable_without_tax;
                }
              })
              list.push(obj);
            })
            v.list = list;
          })
          state.dataSource = res?.returnData || [];
          state.detail = res?.contractInfo || {};
        });
    };

    const init = () => {
      getColumns();
      getDetail();
    };

    const goOwnerDetail = () => {
      if (!state.detail?.owner_id) return;
      state.ownerDetailVisible = true;
    };

    const handleCancelDetail = () => {
      state.ownerDetailVisible = false;
      state.contractDetailVisible = false;
      init();
    };

    const goContractDetail = (id) => {
      if (!id) return;
      state.contractDetailId = id;
      state.contractDetailVisible = true;
    };

    init();
    return {
      ...toRefs(state),
      goBack,
      handleCancelDetail,
      goOwnerDetail,
      goContractDetail,
    };
  },
});


</script>

<style lang="less" scoped>
.bill-detail {
  height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  .header {
    position: relative;
    z-index: 99;
    background: #fff;
    box-shadow: 0px 0px 4px 1px #ddd;
  }
  .content {
    position: relative;
    z-index: 90;
    flex: 1;
    width: 100%;
    height: 100%;
    //max-height: calc(100% - 210px);
    padding: 10px;
    background-color: #f5f5f5;
    box-sizing: border-box;
    overflow-y: auto;
  }
  &.back-class {
    :deep(.ant-page-header-back) {
      display: none;
    }
  }
  .footer {
    :deep(.ant-table-footer) {
      padding: 16px 0;
    }
  }
}
</style>
